<script setup>

</script>

<template>
<div class="interactive_wrap cc-content-body pos-center">
    <div class="top-wrap">
        <div class="top-container">
            <a class="top-item">
                <span>稿件弹幕</span>
            </a>
        </div>
    </div>
    <div class="pagination_container">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="totalComments"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
            class="pagination"
        />
        <div class="pagination-info">
            <span class="total-pages">共{{ totalPages }}页 / {{ totalComments }}个</span>
        </div>
    </div>
</div>
</template>

<style scoped lang="less">
.interactive_wrap.cc-content-body.pos-center{
    width: 80%;
    margin: 0 auto;
    margin-top: 16px;

    .top-wrap{
        position: relative;

        .top-container{
            background: #fff;
            height: 64px;
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: flex !important;
            border-bottom: 1px solid #e7e7e7;
            position: relative;

            .top-item{
                color: #00a1d6;
                border-bottom: 3px solid #00a1d6;
                font-weight: bolder;

                padding-top: 26px;
                height: 100%;
                margin-left: 40px;
                font-size: 16px;
                letter-spacing: .5px;
                line-height: 20px;
                position: relative;
            }
        }
    }
    .pagination_container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .pagination-info {
        text-align: right;
        font-size: 14px;
        color: #666;

        .total-pages {
            margin-left: 10px;
        }
    }



}

</style>
